<template>
	<view class="container">
		<!-- 顶部返回按钮 -->
		<view class="header">
			<view class="header-left">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
					</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="action-button" @click="handleCheckin">
				查看网点,参与抽奖
			</view>
		</view>
		
		<!-- 打卡提示弹窗 -->
		<view class="success-modal-mask" v-if="showCheckinModal" @click="closeCheckinModal">
			<view class="success-modal-content" @click.stop>
				<!-- 关闭按钮 -->
				<view class="close-button" @click="closeCheckinModal">
					<image
						class="close-icon"
						src="/static/资源 1-8.png"
						mode="aspectFit"
					></image>
				</view>
				<!-- 背景图片容器 -->
				<view class="success-modal-bg-wrapper">
					<image
						class="success-modal-bg"
						src="/static/box.png"
						mode="aspectFit"
						:style="{ width: '600rpx', height: '800rpx' }"
					></image>
					<!-- 吉祥物图片 -->
					<image
						class="success-modal-mascot"
						:src="getModalMascotImage(checkinModalButton)"
						mode="aspectFit"
					></image>
					<!-- 提示文字 -->
					<view
						class="success-text small"
						:style="{ color: getModalTextColor(checkinModalButton) }"
					>
						<template v-if="checkinModalText && checkinModalText.includes('\n')">
							<text
								v-for="(line, index) in checkinModalText.split('\n')"
								:key="index"
							>{{ line }}</text>
						</template>
						<text v-else>{{ checkinModalText }}</text>
					</view>
					<!-- 按钮 -->
					<view class="lottery-button" @click="handleModalButton" v-if="checkinModalButton">
						{{ checkinModalButton }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { addLotteryChance } from '@/api/lottery'
import { SpbLottryType } from '@/api/apifox/models'

export default {
	data() {
		return {
			showCheckinModal: false, // 是否显示打卡弹窗
			checkinModalText: '', // 弹窗文案
			checkinModalButton: '' // 弹窗按钮文字
		}
	},
	
	onShow() {
		// 检查是否是从"查看网点"页面返回的
		const fromLocationPage = uni.getStorageSync('checkin_from_location_page')
		
		// 只有从"查看网点"页面返回时才判断打开什么弹窗
		if (fromLocationPage) {
			// 清除标记
			uni.removeStorageSync('checkin_from_location_page')
			// 检查当日打卡缓存并显示弹窗
			this.checkTodayCheckin()
		}
	},
	
	methods: {
		/**
		 * 获取今日日期字符串（格式：YYYY-MM-DD）
		 */
		getTodayDateString() {
			const today = new Date()
			const year = today.getFullYear()
			const month = String(today.getMonth() + 1).padStart(2, '0')
			const day = String(today.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		
		/**
		 * 获取打卡缓存键名
		 */
		getCheckinCacheKey() {
			const today = this.getTodayDateString()
			return `store_checkin_${today}`
		},
		
		/**
		 * 检查当日打卡缓存
		 */
		checkTodayCheckin() {
			const cacheKey = this.getCheckinCacheKey()
			const cached = uni.getStorageSync(cacheKey)
			
			if (cached) {
				// 有缓存，显示"今日抽奖已完成"
				this.checkinModalText = '今日抽奖已完成'
				this.checkinModalButton = '知道了'
				this.showCheckinModal = true
			} else {
				// 没有缓存，设置缓存并显示提示
				uni.setStorageSync(cacheKey, true)
				this.checkinModalText = '恭喜获得\n1次抽奖机会'
				this.checkinModalButton = '立即抽奖'
				this.showCheckinModal = true
			}
		},
		
		/**
		 * 关闭打卡弹窗
		 */
		closeCheckinModal() {
			this.showCheckinModal = false
		},
		
		/**
		 * 处理弹窗按钮点击
		 */
		handleModalButton() {
			// 如果是首次打卡（恭喜获得抽奖机会），点击"知道了"后跳转到抽奖页面
			if (this.checkinModalText.includes('恭喜获得')) {
				this.closeCheckinModal()
				uni.navigateTo({
					url: '/pages/lottery/index'
				})
			} else {
				// 其他情况（今日抽奖已完成）直接关闭
				this.closeCheckinModal()
			}
		},
		
		/**
		 * 返回上一页
		 */
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		
		/**
		 * 获取弹窗吉祥物图片（通用函数）
		 * @param {string} buttonText - 按钮文本
		 * @returns {string} 返回图片路径
		 */
		getModalMascotImage(buttonText) {
			// 当按钮是"立即捐步"时，使用资源 4.png，否则使用资源 33-8.png
			if (buttonText === "立即捐步") {
				return "/static/资源 4.png";
			}
			return "/static/资源 33-8.png";
		},
		
		/**
		 * 获取弹窗文字颜色（通用函数）
		 * @param {string} buttonText - 按钮文本
		 * @returns {string} 返回颜色值
		 */
		getModalTextColor(buttonText) {
			// 当按钮是"立即捐步"时，使用蓝色，否则使用红色
			if (buttonText === "立即捐步") {
				return "#1b6ec1";
			}
			return "#f03c32";
		},
		
		/**
		 * 处理打卡/查看网点
		 */
		async handleCheckin() {
			try {
				// 调用增加抽奖机会接口
				await addLotteryChance({
					lottryType: SpbLottryType.LottryTypeStoreCheckin
				})
			} catch (error) {
				console.error('增加抽奖机会失败:', error)
				// 即使接口调用失败，也继续跳转
			}
			
			// 设置缓存标记，表示是从"查看网点"按钮跳转的
			uni.setStorageSync('checkin_from_location_page', true)
			
			// 跳转到门店位置页面
			uni.navigateTo({
				url: '/pages/store/location'
			})
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-image: url('https://hykoc.oss-cn-beijing.aliyuncs.com/koc/tc2025/map-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	padding: 0;
	position: relative;
}

/* 顶部导航栏 */
.header {
	padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
	padding-top: 104rpx;
	position: relative;
	z-index: 1000;
}

.header-left {
	flex: 1;
}

/* 全局返回按钮样式 */
.global-back-button {
	width: 60rpx;
	height: 60rpx;
	background: #FF0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.global-back-icon {
	color: white;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 1;
}

.global-back-text {
	color: #FFFFFF;
	font-size: 28rpx;
	font-weight: bold;
}

.global-header-left {
	display: flex;
	align-items: center;
}

/* 底部按钮区域 */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 60rpx;
	z-index: 1000;
	background: transparent;
}

.action-button {
	position: relative;
	margin-bottom: 40rpx;
	width: 100%;
	height: 100rpx;
	background: #FF4444;
	border-radius: 25rpx;
	box-shadow: 0 8rpx 20rpx rgba(255, 68, 68, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 36rpx;
	font-weight: bold;
	animation: breathe 2s ease-in-out infinite, pulse 2s ease-in-out infinite;
	transition: all 0.3s ease;
}

.action-button:active {
	transform: translateY(2rpx);
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
	animation: none;
}

/* 呼吸灯动画 */
@keyframes breathe {
	0%, 100% {
		box-shadow: 0 8rpx 20rpx rgba(255, 68, 68, 0.4),
					0 0 0 0 rgba(255, 68, 68, 0.7);
	}
	50% {
		box-shadow: 0 8rpx 20rpx rgba(255, 68, 68, 0.6),
					0 0 30rpx 10rpx rgba(255, 68, 68, 0.3);
	}
}

/* 忽大忽小动画 */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
}

/* 成功弹窗遮罩层 */
.success-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-in-out;
}

/* 成功弹窗内容 */
.success-modal-content {
	position: relative;
	width: 600rpx;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: scaleIn 0.3s ease-in-out;
}

/* 关闭按钮 */
.close-button {
	position: absolute;
	top: 20rpx;
	right: -20rpx;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
	cursor: pointer;
}

/* 关闭图标 */
.close-icon {
	width: 60rpx;
	height: 60rpx;
}

/* 背景图片容器 */
.success-modal-bg-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 150rpx;
}

/* 背景图片 */
.success-modal-bg {
	width: 600rpx;
	height: 800rpx;
	border-radius: 20rpx;
}

/* 吉祥物图片 */
.success-modal-mascot {
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translateX(-50%);
	width: 200rpx;
	height: 200rpx;
	z-index: 10;
}

/* 提示文字 */
.success-text {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ff0000;
	font-size: 66rpx;
	font-weight: bold;
	text-align: center;
	z-index: 10;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.success-text.small {
	font-size: 42rpx;
}

.success-text text {
	display: block;
	line-height: 1.5;
}

/* 点击抽奖按钮 */
.lottery-button {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 400rpx;
	height: 88rpx;
	background: #f03c32;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 36rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 24rpx rgba(255, 0, 0, 0.4);
	transition: all 0.3s ease;
	z-index: 10;
}

.lottery-button:active {
	transform: translateX(-50%) scale(0.95);
	box-shadow: 0 4rpx 12rpx rgba(255, 0, 0, 0.3);
}

/* 弹窗淡入动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 弹窗缩放动画 */
@keyframes scaleIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
</style>
